<template>
  <div class="app">
    <suspense>
      <template #default>
        <AsyncHome/>
      </template>
      <template #fallback>
        <h2>Loading</h2>
      </template>
    </suspense>
  </div>
</template>

<script setup>
  // defineAsyncComponent函数在"124.动态组件-Keep-Alive-异步组件-混入Mixin"的"12.Vue项目打包-异步组件的使用"讲过
  import { defineAsyncComponent } from "vue";
  // AsyncHome.vue被当成异步组件来使用，AsyncHome.vue打包好的文件需要从服务器下载，有可能这个文件还没下载好，模版就准备渲染<AsyncHome/>，那肯定渲染不出来。
  // 解决方案：没有下载好时，先显示一个默认的组件，下载好后再显示<AsyncHome/>
  const AsyncHome=defineAsyncComponent(()=>import("./AsyncHome.vue"))
</script>

<style scoped>

</style>